<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		article {
			margin-top: 20px;
		}

		#one {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
		}

		div {
			border: 1px solid green;
			background: blueviolet;
			background-clip: content-box;
			padding: 5px;
			box-sizing: border-box;
		}

		.d1 {
			grid-column-start: 1;
			grid-row-start: 1;
			grid-column-end: 4;
			grid-row-end: 1;
		}

		.d2 {
			background: #ccc;
			background-clip: content-box;
			grid-column-start: 1;
			grid-row-start: 2;
			grid-column-end: 2;
			grid-row-end: 4;
		}

		.d3 {
			background: #684444;
			background-clip: content-box;
			grid-column-start: 2;
			grid-row-start: 2;
			grid-column-end: 4;
			grid-row-end: 4;
		}

		/* 
			分成了三行三列
			所以横纵线均为4条
			规定好该元素是的边界 也就是起止的横纵线编号 
			这样所占区域也就得出来了
		*/
	</style>
</head>

<body>
	<article id="one">
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
	</article>
</body>

</html>